<script lang="ts" setup>
import { ref } from 'vue'
import PageLayout from '@/layouts/PageLayout.vue'
import { useSafeAreaHooks } from '@/composables/useSafeArea'
import { APP_NAVBAR_HEIGHT, APP_TABBAR_HEIGHT } from '@/constant/index'

const { top, bottom } = useSafeAreaHooks()
console.log(
  '%c top: ',
  'font-size:14px;color:#7ec050;',
  top,
  bottom,
)

const isRefreshing = ref(false)
const commentText = ref('')

function chooseImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      console.log('选择图片成功', res.tempFilePaths[0])
      // 这里可以处理选择的图片，比如上传到服务器
    },
  })
}

const images = [
  'https://ai-public.mastergo.com/ai/img_res/665df8d592229925f8a72c2058a6b078.jpg',
  'https://ai-public.mastergo.com/ai/img_res/cea15a7acd73b0b06a17393082a11312.jpg',
  'https://ai-public.mastergo.com/ai/img_res/2d2339e4bd029ce3b28f48492b48a8f8.jpg',
]

const authorAvatar = 'https://ai-public.mastergo.com/ai/img_res/a24c2adcd17ae7c28e28389e02248117.jpg'

const comments = ref([
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/28a88b430017c1035a9645bd79a15ddb.jpg',
    username: '美食家小王',
    content: '看起来太诱人了！一定要去尝试一下！',
    time: '1小时前',
    likes: 286,
  },
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/215856da69417858c29132da63103c6d.jpg',
    username: '吃货小李',
    content: '已经收藏了，周末就去打卡！',
    time: '2小时前',
    likes: 156,
  },
  {
    avatar: 'https://ai-public.mastergo.com/ai/img_res/09102e7c746aa5611982c2747f67498d.jpg',
    username: '美食探店达人',
    content: '这家店我也去过，确实很不错，强烈推荐！',
    time: '3小时前',
    likes: 521,
  },
])

function goBack() {
  uni.navigateBack()
}

function showMore() {
  uni.showActionSheet({
    itemList: ['举报', '不感兴趣'],
  })
}

function previewImage(index: number) {
  uni.previewImage({
    urls: images,
    current: index,
  })
}
function loadMore() {
  // 加载更多评论
}
function onRefresh() {
  isRefreshing.value = true
  setTimeout(() => {
    isRefreshing.value = false
  }, 1000)
}
// 适配安全区
const containerStyle = computed(() => ({
  paddingTop: `${top}px`,
  paddingBottom: `${bottom}px`,
  boxSizing: 'border-box',
}))

const pageStyles = computed(() => ({
  marginTop: `${APP_NAVBAR_HEIGHT}px`,
  overflow: 'hidden',
  height: `calc(100vh - ${top}px - ${bottom}px - ${APP_NAVBAR_HEIGHT}px - ${APP_TABBAR_HEIGHT}px)`,
}))

const getScrollStyle = computed(() => ({
  height: `calc(100vh - ${top}px - ${bottom}px - ${APP_NAVBAR_HEIGHT}px - ${APP_TABBAR_HEIGHT}px)`,
}))
</script>

<template>
  <!-- <PageLayout> -->
  <view
    class="container"
    :style="{ ...containerStyle }"
  >
    <view :style="{ ...pageStyles }">
      <!-- 顶部导航栏 -->
      <view
        class="nav-bar"
        :style="{ top: `${top}px`, height: `${APP_NAVBAR_HEIGHT}px` }"
      >
        <view class="nav-left">
          <wd-icon
            name="arrow-left"
            size="23px"
            color="#333333"
            @click="goBack"
          />
        </view>
        <view class="nav-title">
          美食分享
        </view>
        <view class="nav-right">
          <wd-icon
            name="more"
            size="22px"
            color="#333333"
            @click="showMore"
          />
        </view>
      </view>
      <!-- 内容区域 -->
      <scroll-view
        class="content-scroll"
        :style="getScrollStyle"
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @scrolltolower="loadMore"
        @refresherrefresh="onRefresh"
      >
        <!-- 图片轮播 -->
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="false"
          indicator-active-color="#ff2442"
        >
          <swiper-item
            v-for="(img, index) in images"
            :key="index"
          >
            <image
              :src="img"
              mode="aspectFill"
              class="swiper-img"
              @click="previewImage(index)"
            />
          </swiper-item>
        </swiper>
        <!-- 文章信息 -->
        <view class="article-info">
          <view class="author-info">
            <image
              class="avatar"
              :src="authorAvatar"
              mode="aspectFill"
            />
            <view class="author-detail">
              <text class="author-name">
                小红薯达人
              </text>
              <text class="post-time">
                2小时前
              </text>
            </view>
            <uni-button
              type="primary"
              class="follow-btn"
              hover-class="follow-btn-hover"
            >
              <wd-icon
                name="add"
                size="14px"
                color="#fff"
              />
              <text class="follow-text">
                关注
              </text>
            </uni-button>
          </view>
          <text class="article-title">
            超级好吃的美食分享，人均只要50块钱！
          </text>
          <text class="article-content">
            今天给大家分享一家超级好吃的餐厅，人均只要50块钱就能吃到非常美味的菜品。餐厅环境优雅，服务态度很好，最重要的是菜品非常美味，强烈推荐大家去尝试！
          </text>
          <view class="tags">
            <text class="tag">
              #美食探店
            </text>
            <text class="tag">
              #人均50
            </text>
            <text class="tag">
              #推荐
            </text>
          </view>
          <view class="location">
            <uni-icons
              type="location"
              size="16"
              color="#666666"
            />
            <text class="location-text">
              北京市朝阳区
            </text>
          </view>
        </view>
        <!-- 互动区域 -->
        <view class="interaction">
          <view class="interaction-item">
            <wd-icon
              name="heart"
              size="22px"
              color="#666"
            />
            <text class="count">
              2.3w
            </text>
          </view>
          <view class="interaction-item">
            <wd-icon
              name="star"
              size="22px"
              color="#666"
            />
            <text class="count">
              1.5w
            </text>
          </view>
          <view class="interaction-item">
            <wd-icon
              name="chat1"
              size="22px"
              color="#666666"
            />
            <text class="count">
              3.2k
            </text>
          </view>
        </view>
        <!-- 评论区域 -->
        <view class="comments">
          <view class="comments-header">
            <text class="comments-title">
              评论 3.2k
            </text>
          </view>
          <view class="comment-list">
            <view
              v-for="(comment, index) in comments"
              :key="index"
              class="comment-item"
            >
              <image
                class="comment-avatar"
                :src="comment.avatar"
                mode="aspectFill"
              />
              <view class="comment-content">
                <text class="comment-username">
                  {{ comment.username }}
                </text>
                <text class="comment-text">
                  {{ comment.content }}
                </text>
                <view class="comment-info">
                  <text class="comment-time">
                    {{ comment.time }}
                  </text>
                  <view class="comment-actions">
                    <view class="like-btn">
                      <text class="i-mdi-cards-heart-outline text-[12px] text-[#666666]" />
                      <text class="like-count">
                        {{ comment.likes }}
                      </text>
                    </view>
                    <text class="reply-btn">
                      回复
                    </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 底部评论输入框 -->
      <view
        class="comment-input"
        :style="{ bottom: `${bottom}rpx` }"
      >
        <input
          v-model="commentText"
          type="text"
          placeholder="说点什么..."
        >
        <view class="input-actions">
          <view
            class="upload-btn"
            @click="chooseImage"
          >
            <wd-icon
              name="picture"
              size="20px"
              color="#666"
            />
          </view>
          <uni-button
            type="primary"
            class="send-btn"
            hover-class="send-btn-hover"
          >
            <text class="i-mdi-send send-icon text-[16px] text-#fff" />
            <text class="send-text">
              发送
            </text>
          </uni-button>
        </view>
      </view>
    </view>
  </view>
  <!-- </PageLayout> -->
</template>

<style lang="less" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;

  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    border-bottom: 1px solid #f5f5f5;

    .nav-title {
      font-weight: bold;
    }

    .nav-left,
    .nav-right {
      display: flex;
      align-items: center;
      gap: 30rpx;
    }
  }

  .content-scroll {
    flex: 1;
    overflow: auto;

    .swiper {
      width: 750rpx;
      height: 750rpx;

      .swiper-img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.article-info {
  padding: 30rpx;
}

.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.author-detail {
  flex: 1;
}

.author-name {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  display: block;
}

.post-time {
  font-size: 12px;
  color: #999999;
  display: block;
  margin-top: 4rpx;
}

.follow-btn {
  background-color: #ff2442;
  color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  padding: 8rpx 24rpx;
  box-sizing: border-box;
  line-height: normal !important;
}

.follow-btn-hover {
  background-color: #e61e3a;
}

.follow-text {
  margin-left: 4rpx;
  font-size: 14px;
}

.article-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
}

.article-content {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 30rpx;
  display: block;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.tag {
  font-size: 12px;
  color: #ff2442;
  background-color: #ffeef0;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}

.location {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 30rpx;
}

.location-text {
  font-size: 12px;
  color: #666666;
}

.interaction {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.interaction-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.count {
  font-size: 14px;
  color: #666666;
}

.comments {
  padding: 30rpx;
}

.comments-header {
  margin-bottom: 30rpx;
}

.comments-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.comment-item {
  display: flex;
  margin-bottom: 30rpx;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 20rpx;
}

.comment-content {
  flex: 1;
}

.comment-username {
  font-size: 14px;
  color: #333333;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.comment-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  display: block;
  margin-bottom: 10rpx;
}

.comment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-time {
  font-size: 12px;
  color: #999999;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.like-count {
  font-size: 12px;
  color: #666666;
}

.reply-btn {
  font-size: 12px;
  color: #666666;
}

.comment-input {
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  border-top: 1px solid #f5f5f5;
  flex-shrink: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.comment-input input {
  flex: 1;
  height: 72rpx;
  background-color: #f5f5f5;
  border-radius: 36rpx;
  padding: 0 30rpx;
  font-size: 14px;
  margin-right: 20rpx;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background-color: #f5f5f5;
}

.send-btn {
  background-color: #ff2442;
  color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  padding: 12rpx 24rpx 12rpx 18rpx;
  box-sizing: border-box;
  line-height: normal !important;

  .send-icon {
    transform: rotate(-45deg) translate(3px, 0px);
  }
}

.send-btn-hover {
  background-color: #e61e3a;
}

.send-text {
  margin-left: 8rpx;
  font-size: 14px;
}
</style>
